<template>
    <div id="bar-side">
        <ItemBarSide
            v-on:chg-catalog="$emit('chg-catalog', catalog)"
            :catalog="catalog"
            :key="catalog.index"
            v-for="catalog in catalogs"
        />
    </div>
</template>

<script>
import ItemBarSide from "@/components/ItemBarSide";

export default {
    components: {
        ItemBarSide
    },
    data: function() {
        return {
            catalogs: [
                {
                    id: 1,
                    name: "IT",
                    description: "information technology"
                },
                {
                    id: 2,
                    name: "ACG",
                    description: "ACG"
                }
            ]
        };
    }
};
</script>

<style scoped>
.bar-side-item {
    width: 10vw;
}

#bar-side {
    width: 10vw;
    background-color: white;
    padding: 10px;
    border-radius: 18px;
    margin: 20px;
    box-shadow: 1px 1px 5px #bbbbbb;
}
</style>
